<template>
  <div class="right-content">
    <div class="panel panel-jiankong">
      <div class="left-content has-border">
        <i class="icon"></i>
        <div class="title">分路监控</div>
      </div>
      <div class="right-c">
        <div class="icon">
          <div class="icon-body">
            <span>监测分路</span>
            <div><i class="fa fa-anchor" aria-hidden="true"></i></div>
          </div>
          <div class="icon-footer">
            <VueCountTo :startVal=0 :endVal="Number(rightBlockInfo.deviceTotal || 0)" class="font-lcd"></VueCountTo>
            <span>路</span>
          </div>
        </div>
        <div class="icon">
          <div class="icon-body">
            <span>在线分路</span>
            <div><i class="fa fa-check" aria-hidden="true"></i></div>
          </div>
          <div class="icon-footer">
            <VueCountTo :startVal=0 :endVal="Number(rightBlockInfo.deviceOnlineSize || 0)" class="font-lcd"></VueCountTo>
            <span>路</span>
          </div>
        </div>
        <div class="icon">
          <div class="icon-body">
            <span>离线分路</span>
            <div><i class="fa fa-times" aria-hidden="true"></i></div>
          </div>
          <div class="icon-footer">
            <VueCountTo :startVal=0 :endVal="Number(rightBlockInfo.deviceOfflineSize || 0)" class="font-lcd"></VueCountTo>
            <span>路</span>
          </div>
        </div>
      </div>
    </div>
    <div class="panel panel-paiming">
      <div class="left-content has-border">
        <i class="icon"></i>
        <div class="title">今日电量排名</div>
      </div>
      <div class="right-c">
        <PaiMing :lists="rightBlockInfo.todayUsePowerList" />
      </div>
    </div>
    <div class="panel panel-yichang">
      <div class="left-content has-border">
        <i class="icon"></i>
        <div class="title">异常事件</div>
      </div>
      <div class="right-content">
        <YiChange :lists="rightBlockInfo.exceptionList" />
      </div>
    </div>
  </div>
</template>
<script>
import VueCountTo from "vue-count-to"
import PaiMing from "./PaiMing"
import YiChange from "./YiChang"
export default {
  data: () => ({}),
  components: { VueCountTo, PaiMing, YiChange },
  props: {
    rightBlockInfo: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>
